<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="custom-navbar">
			<view class="search-bar" @click="handleSearchBarClick">
				<view class="search-input">
					<input disabled="" placeholder="🔍 搜索目的地/景点" v-model="searchKeyword" />
					<!-- <u-search placeholder=" 搜索目的地/景点" @click="handleSearchBarClick"  disabled="false" :showAction="false"></u-search> -->
				</view>
				<u-button text="搜索" class="search-btn"></u-button>
			</view>

			<view class="tags-container">
				<u-tag v-for="(tag, index) in hotTags" :key="index" :text="tag" shape="circle" class="u-tag" />
			</view>
		</view>

		<!-- 主体内容区域 -->
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{
							page: { size: 6 }, // 初始分页大小
							textNoMore: '-- 没有更多内容 --' ,
							toTop:{
								offset:300,//下滑一定距离出现置顶按钮
							}
		}">
			<view class="main-content">
				<!-- 分类导航区 -->
				<view class="category-section">
					<view class="category-grid">
						<view v-for="(item, index) in categories" :key="index" class="category-card"
							@click="navToCategory(index)">
							<image :src="item.icon" class="card-icon" mode="aspectFit" />
							<text class="card-title">{{ item.title }}</text>
						</view>
					</view>
				</view>

				<!-- 轮播图 -->
				<view class="banner-section">
					<u-swiper :list="contentList" keyName="coverImage" height="260" radius="18"
						indicator-pos="bottomCenter" :autoplay="true" @click="goToBannerDetail"></u-swiper>
				</view>

				<!-- 精选推荐流 -->
				<view class="content-section">
					<view class="section-header">
						<text class="section-title">精选推荐</text>
						<text class="more-link">查看更多</text>
					</view>
					<view class="content-list">
						<content-card v-for="item in contentList" :key="item.homeId" :item="item" />
					</view>
					<view v-if="!isLoggedIn" class="more-btn-wrap">
						<button class="more-btn" @click="goToLogin">登录查看更多</button>
					</view>

				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import config from "@/config";
	import {
		contentListByPage
	} from "@/api/system/homestay.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				isLoggedIn: uni.getStorageSync("isLoggedIn") || false,
				searchKeyword: "",
				hotTags: ["北京", "故宫", "天安门", "温泉", "世界杯", "景山公园"],
				categories: [{
						title: "亲子游",
						icon: "/static/images/icon/son.png",
					},
					{
						title: "文化游",
						icon: "/static/images/icon/book.png",
					},
					{
						title: "温泉游",
						icon: "/static/images/icon/water.png",
					},
					{
						title: "周边游",
						icon: "/static/images/icon/swim.png",
					},
					{
						title: "旅游地图",
						icon: "/static/images/icon/map.png",
					},
					{
						title: "酒店民宿",
						icon: "/static/images/icon/hotel.png",
					},
					{
						title: "汽车票",
						icon: "/static/images/icon/car.png",
					},
					{
						title: "飞机票",
						icon: "/static/images/icon/plane.png",
					},
				],
				contentList: [],
				isLoading: false, // 加载状态
			};
		},
		methods: {
			navToCategory(index) {
				console.log(index)
				if (index <= 3) {
					uni.navigateTo({
						url: "/pages/theme-list/theme-list",
					});
				} else {
					uni.switchTab({
						url: "/pages/homestay/homestay",
					});
				}

			},
			goToBannerDetail(index) {
				const id = this.banners[index].id;
				uni.navigateTo({
					url: `/pages/homestay/detail?id=${id}`,
				});
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/homestay/detail?id=${id}`,
				});
			},
			goToLogin() {
				uni.navigateTo({
					url: "/pages/login/login",
				});
			},
			// 添加搜索栏点击事件，供你实现跳转逻辑
			handleSearchBarClick() {
				uni.navigateTo({
					url: "/pages/search/search"
				});
			},
			upCallback(page) {
				const pageSize = 6
				//设置延迟
				setTimeout(() => {
					contentListByPage(page.num, pageSize).then(res => {

						// 使用正确的响应字段
						const currentList = res.rows || []
						const totalCount = res.total || 0

						// 处理图片路径和标签
						const processedList = currentList.map(item => {
							// 测试图片是否可访问
							return {
								...item,
								coverImage: "http://101.34.184.250:8080" + item.coverImage,
								tags: this.formatTags(item.tags)
							}
						})

						// 设置列表数据
						if (page.num === 1) {
							this.contentList = processedList
							this.bannerList = processedList.slice(0, 3) // 轮播图取前3条
						} else {
							this.contentList = [...this.contentList, ...processedList]
						}
						// 使用正确的字段结束加载
						this.mescroll.endBySize(currentList.length, totalCount)

					}).catch(() => {
						this.mescroll.endErr()
					});
				}, 1000);

			},
			// 添加标签格式化方法
			formatTags(tags) {
				if (typeof tags === "string") {
					try {
						const arr = JSON.parse(tags)
						return Array.isArray(arr) ?
							arr.map(tag => String(tag).replace(/^[\[\s'"]+|[\]\s'"]+$/g, "")) :
							tags.split(",").map(tag => tag.trim())
					} catch {
						return tags.split(",").map(tag => tag.trim())
					}
				}
				return tags
			}
		},
	};
</script>z

<style scoped>
	.custom-navbar {
		position: fixed;
		width: 100%;
		height: calc(var(--status-bar-height) + 195rpx);
		z-index: 10;
		/* 确保导航栏所有元素置于最高层不会被主题内容覆盖*/
		background: linear-gradient(90deg, #4e73df 0%, #02a7f0 100%);
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.5);
		/*控制导航栏下方阴影区域，添加底部阴影（2rpx垂直偏移，8rpx模糊，透明度0.04），创造轻微抬升效果。*/
		display: flex;
		/*使用该布局可以方便垂直对齐元素，并使元素在垂直方向上居中。 */
		flex-direction: column;
		/**使子元素垂直排列 */
		padding: 0rpx 10rpx 20rpx;
	}

	.search-bar {
		margin-top: 15px;
		display: flex;
		align-items: center;
		height: 70rpx;
		background-color: #fff;
		justify-content: space-between;
		/* 确保输入框和按钮两端对齐 */
		width: 100%;
		border-radius: 50rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}

	.search-input {
		color: #333;
		padding: 0 10rpx 0px 10px;
		flex-grow: 1;
	}

	.search-btn {
		border-radius: 35px !important;
		background: linear-gradient(to bottom, #4e73df, #02a7f0);
		width: 120rpx !important;
		height: 60rpx !important;
		color: white !important;
		margin-right: 5rpx;
	}

	.tags-container {
		margin-top: 20rpx;
		height: 50rpx;
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* 标签样式 */
	.u-tag {
		/* 文字颜色 */
		color: #fff;
		/* 圆角 */
		border-radius: 12px;
		/* 白色轮廓线 */
		border: 0px solid #881919;
		/* 标签间距 */
		margin: 0 6px;
	}

	/* 主体内容区域 */
	.main-content {
		background: #f7f7f7;
		margin-top: calc(var(--status-bar-height) + 190rpx);
	}

	@media (max-width: 767px) {

		.custom-navbar,
		.scroll-view {
			padding-top: var(--status-bar-height) !important;
		}
	}

	/* 分类导航区 */
	.category-section {
		padding: 20rpx;
	}

	.category-card {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 140rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.1s ease;
	}

	.category-card:active {
		transform: scale(0.95);
	}

	/* 为不同卡片设置不同的渐变色（第1-8个卡片） */
	.category-card:nth-child(1) {
		border-top-left-radius: 10px;
		background: linear-gradient(180deg, #2fa294 0%, #06b288 100%);
	}

	.category-card:nth-child(2) {
		background: linear-gradient(0deg, #66a8f7 0%, #3376f6 100%);
	}

	.category-card:nth-child(3) {
		background: linear-gradient(0deg, #ec392f 0%, #fe6e48 100%);
	}

	.category-card:nth-child(4) {
		border-top-right-radius: 10px;
		background: linear-gradient(0deg, #6e9afe 0%, #4563f5 100%);
	}

	.category-card:nth-child(5) {
		border-bottom-left-radius: 10px;
		background: linear-gradient(0deg, #7d7de9 0%, #7884f5 100%);
	}

	.category-card:nth-child(6) {
		background: linear-gradient(0deg, #f5855a 0%, #d44241 100%);
	}

	.category-card:nth-child(7) {
		background: linear-gradient(0deg, #709dff 0%, #6785ff 100%);
	}

	.category-card:nth-child(8) {
		border-bottom-right-radius: 10px;
		background: linear-gradient(0deg, #ff763b 0%, #ffa727 100%);
	}


	.category-grid {
		/* 网格布局 */
		display: grid;
		/* 创建4列的网格布局 */
		grid-template-columns: repeat(4, 1fr);
		gap: 5rpx;
	}

	.card-icon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 16rpx;
	}

	.card-title {
		font-size: 26rpx;
		font-weight: 400;
		text-align: center;
		color: #fff;
	}

	/* 轮播图 */
	.banner-section {
		margin: 0 24rpx 24rpx 24rpx;
	}

	/* 精选推荐流 */
	.content-section {
		margin: 0 30rpx;
	}

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}

	.more-link {
		font-size: 24rpx;
		color: var(--primary-color);
		font-weight: 600;
	}

	.content-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
	}

	.more-btn-wrap {
		display: flex;
		justify-content: center;
		margin: 24rpx 0;
	}

	.more-btn {
		background: linear-gradient(90deg, #4f8cff 0%, #007aff 100%);
		color: #fff;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-weight: bold;
		padding: 16rpx 64rpx;
		border: none;
		box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.1);
	}
</style>